<script setup lang="ts">
import { ElSkeleton, ElSkeletonItem } from 'element-plus'
import { useRoute } from 'vue-router'
import { useInformations } from './hooks'

const { params } = useRoute()
const { Document } = useInformations()
Document.run(params.id as unknown as number)
</script>

<template>
  <div class="m">
    <ElSkeleton class="brd8 h50vh" animated :loading="Document.loading.value">
      <template #template>
        <div class="brd8 my20 bg-white p20">
          <ElSkeletonItem
            v-for="item in 6"
            :key="item"
            variant="h3"
            class="mb15 h30"
            :class="{ 'w40%': item === 1, 'w60%': item === 6 }"
          />
        </div>
      </template>
      <template #default>
        <div class="brd8 lh1.5 my20 bg-white px20 py30">
          <div
            class="fs16 mb10 fw600"
            v-html="Document.data.value?.Title"
          />
          <div v-html="Document.data.value?.Content" />
        </div>
      </template>
    </ElSkeleton>
  </div>
</template>

<style lang="scss" scoped></style>
